import React, { useCallback } from 'react'
import Taro from '@tarojs/taro'
import { Text, View } from '@tarojs/components'
import { LanguageType } from '@INTERFACES/Common'
import PlanGuideSteps from '@COMPONENTS/PlanManagement/PlanGuideSteps'
import PlanExplore from '@COMPONENTS/PlanManagement/PlanExplore'
import PlanGuideBottom from '@COMPONENTS/PlanManagement/PlanGuideBottom'
import PlanGuideGoods from '@COMPONENTS/PlanManagement/PlanGuideGoods'
import PlanGuidePersona from '@COMPONENTS/PlanManagement/PlanGuidePersona'
import { useSelector } from 'react-redux'
import { RootStateITF } from '@REDUXITF/index'
import { ManagementPlanStateITF } from '@REDUXITF/managementPlan'
import PlanGuidDesc from '@COMPONENTS/PlanManagement/PlanGuidDesc'
import NavBar from '@COMPONENTS/NavBar/NavBar'
import HomeBannerExtend from '@COMPONENTS/Banner/HomeBannerExtend'
import { Analytic_Type } from '@CONSTANTS/analytic'
import Navigate from '@NAVIGATION/navigateManager'
import style from './PlanGuide.module.scss'
interface Props {
    language: LanguageType
    height: string
    showTitle: string
    showLogin: ()=> void
    isDisabledConsultation: boolean
    virtualHeight?: number
}
const PlanGuide :React.FC<Props> = ({ language, height, showTitle, showLogin, isDisabledConsultation, virtualHeight = 0 }) => {
  const { recommendGoodsEvents, homePersonaEvents, homePageSpotEvents, homePagePainDescEvents
  } = useSelector<RootStateITF, ManagementPlanStateITF>(state => state.managementPlan)
  const onClickPlan = useCallback(() => {
    Taro.tracker.trackEvent(Analytic_Type.num_guide_more_plan.eventId)
    Navigate.planList({ isGuide: true })
  }, [])
  return (
    <View className={style.container}>
      <NavBar
        showIcon={false}
        title={showTitle || '疼爱健康'}
        backgroundColor="transparent"
      />
      <PlanGuidDesc
        showLogin={showLogin}
        data={homePagePainDescEvents}
        homePageSpotEvents={homePageSpotEvents}
        language={language}
        height={height}
        virtualHeight={virtualHeight}
      />
      <HomeBannerExtend showLogin={showLogin} />
      <PlanGuideSteps />
      {!isDisabledConsultation && <PlanGuidePersona data={homePersonaEvents} language={language} />}
      <View className={style.planContainer} onClick={onClickPlan}>
        <Text className={style.btn}>{'了解更多适合我的解决方案 >'}</Text>
      </View>
      {!isDisabledConsultation && <PlanGuideGoods data={recommendGoodsEvents} />}
      <PlanExplore />
      <PlanGuideBottom data={homePageSpotEvents} showLogin={showLogin} />
    </View>
  )
}

export default PlanGuide
